import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
void main() {
  runApp(MyApp());
}

bool _sbcyq = false;
bool _sbcyq1 = true;
bool _isShow = true;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color.fromRGBO(51, 51, 51, 1),
      ),
      home: Scaffold(
        backgroundColor: Color.fromRGBO(236, 236, 236, 1),
        appBar: AppBar(
            // backgroundColor: Color.fromRGBO(51, 51, 51, 1),
            titleSpacing: 0.0,
            title: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                FlatButton(
                  child: Row(
                    children: [
                      Icon(
                        Icons.arrow_back_ios,
                        color: Colors.white,
                      ),
                      Text(
                        '返回',
                        style: TextStyle(color: Colors.white, fontSize: 16),
                      )
                    ],
                  ),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                Container(
                  child: Row(
                    children: [
                      Text(
                        '发布跑腿',
                        style: TextStyle(fontSize: 16),
                      ),
                      SizedBox(
                        width: 25,
                      )
                    ],
                  ),
                ),
                IconButton(icon: Icon(Icons.more_horiz), onPressed: () {}),
              ],
            )),
        body: Column(children: <Widget>[
          buildTop(),
          buildSecond(context),
          page2(),
          weixinpay(),
          Spacer(),
          BuildBottom(),
        ]),
      ),
    );
  }
}

Widget buildTop() {
  return Container(
    color: Colors.white,
    margin: EdgeInsets.only(bottom: 10),
    padding: EdgeInsets.all(15),
    child: Column(children: <Widget>[
      Row(
        children: <Widget>[
          Icon(Icons.android),
          SizedBox(
            width: 10,
          ),
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: '请输入任务主题（限20字）',
                hintStyle: TextStyle(color: Colors.grey, fontSize: 14),
                contentPadding: const EdgeInsets.all(10.0),
              ),
            ),
          )
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Row(
        children: <Widget>[
          Icon(Icons.android),
          SizedBox(
            width: 10,
          ),
          Expanded(
              child: TextField(
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.grey, //边线颜色为黄色
                  width: 1, //边线宽度为2
                ),
              ),
              focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                color: Colors.blue, //边框颜色为绿色
                width: 2, //宽度为5
              )),
              hintText: "请输入需要完成的事情，可附上期望完成的时间",
              hintStyle: TextStyle(color: Colors.grey, fontSize: 14),
            ),
          ))
        ],
      ),
      Divider(
        height: 35,
        color: Colors.grey,
      ),
      Container(
        height: 25,
        child: FlatButton(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, //zaizhezaizhe
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                children: <Widget>[
                  Icon(
                    Icons.location_on,
                    size: 25,
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  Column(
                    children: <Widget>[
                      Text(
                        "请设置您的地址和联系方式",
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),
                ],
              ),
              Icon(Icons.chevron_right)
            ],
          ),
          onPressed: () {
            print("111");
          },
        ),
      ),
    ]),
  );
}

Widget buildSecond(BuildContext context) {
  return page();
}

class page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(top: 15,bottom: 15),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '请设置跑腿费',
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(
                width: 15,
              ),
              Container(
                width: 15,
                height: 15,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(Radius.circular(7.5))),
                child: GestureDetector(
                  onTap: () {
                    // Navigator.pop(context);
                    showDialog(
                        context: context,
                        barrierDismissible: false,
                        builder: (cont) {
                          return MyDialog();
                        });
                  },
                  child: Text(
                    "?",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          ),
      Container(
          margin: EdgeInsets.only(top: 10,bottom: 15, left: 150, right: 150),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.grey, //边线颜色为hui色
                          width: 1, //边线宽度为2
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.blue, //边框颜色为绿色
                            width: 2, //宽度为5
                          )),
                      hintText: ("¥5.00"),
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontSize: 18,
                      ),
                    ),
                  )),
            ],
          )
      ),
          Container(
            margin: EdgeInsets.only(left: 130, right: 130),
            height: 1,
            decoration: BoxDecoration(
                color: Colors.grey,
                border: Border.all(width: 0.5)
            ),
          )
        ],
      ),
    );
  }
}

class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
      children: <Widget>[
        Container(
          height: 20,
          width: 280,
          alignment: Alignment.center,
          child: Text(
            "提醒",
            style: TextStyle(fontSize: 18),
          ),
        ),
        Divider(
          height: 30,
          color: Colors.grey,
        ),
        Container(
          height: 80,
          width: 280,
          padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
          alignment: Alignment.center,
          child: Text(
            "平台会将支付跑腿费金额的20%作为抽成，"
            "接单者实际获得的跑腿费是平台提取抽成后的金额。",
          ),
        ),
        Container(
          // color: Colors.yellow,
          margin: EdgeInsets.only(left: 50, right: 50, top: 10),
          child: FlatButton(
            child: Text("我知道了"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey),
          ),
        ),
      ],
    );
  }
}

class page2 extends StatefulWidget {
  @override
  _page2State createState() => _page2State();
}

class _page2State extends State<page2> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(left: 25, right: 25),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, //zaizhezaizhe
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(color: Colors.grey.withOpacity(0.3)))),
          ),
          Container(
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(color: Colors.grey.withOpacity(0.3)))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(Icons.assistant_photo),
                    SizedBox(
                      width: 15,
                    ),
                    Text(
                      '是否加急',
                      style: TextStyle(fontSize: 16),
                    ),
                  ],
                ),
                Switch(
                  value: _sbcyq1,
                  onChanged: (val) =>
                      setState(() => {_sbcyq = !_sbcyq, _sbcyq1 = !_sbcyq1}),
                ),
              ],
            ),
          ),
          Container(
              height: 50,
              child: Offstage(
                offstage: _sbcyq,
                child: CustomRadio(),
              ))
        ],
      ),
    );
  }
}

class CustomRadio extends StatefulWidget {
  @override
  createState() {
    return CustomRadioState();
  }
}

class CustomRadioState extends State<CustomRadio> {
  List<RadioModel> sampleData = new List<RadioModel>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    sampleData.add(new RadioModel(false, '+3元'));
    sampleData.add(new RadioModel(false, '+5元'));
    sampleData.add(new RadioModel(false, '+10元'));
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      itemCount: sampleData.length,
      itemBuilder: (BuildContext context, int index) {
        return new InkWell(
          splashColor: Colors.transparent,
          onTap: () {
            setState(() {
              sampleData.forEach((element) => element.isSelected = false);
              sampleData[index].isSelected = true;
            });
          },
          child: new RadioItem(sampleData[index]),
        );
      },
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;
  RadioItem(this._item);
  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: new EdgeInsets.only(left: 35, right: 35, top: 10, bottom: 30),
      child: new Row(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            height: 30.0,
            width: 60.0,
            child: new Center(
              child: new Text(_item.buttonText,
                  style: new TextStyle(
                      color: _item.isSelected ? Colors.green : Colors.black,
                      //fontWeight: FontWeight.bold,
                      fontSize: 18.0)),
            ),
            decoration: new BoxDecoration(
              color: _item.isSelected ? Colors.transparent : Colors.transparent,
              border: new Border.all(
                  width: 1.0,
                  color: _item.isSelected ? Colors.green : Colors.grey),
              borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
            ),
          ),
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  RadioModel(this.isSelected, this.buttonText);
}

class weixinpay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.only(left: 20, right: 20),
      height: 50,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, //zaizhezaizhe
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            children: <Widget>[
              Icon(
                Icons.payment,
                size: 40,
                color: Colors.green,
              ),
              SizedBox(
                width: 15,
              ),
              Row(
                children: <Widget>[
                  Text(
                    "微信支付",
                    style: TextStyle(fontSize: 20),
                  ),
                ],
              ),
            ],
          ),
          Icon(Icons.done),
        ],
      ),
    );
  }
}

class grey extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 150,
      color: Colors.grey.withOpacity(0.3),
    );
  }
}

class BuildBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 50,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.yellow,
        //borderRadius: BorderRadius.all(Radius.circular(7.5))
      ),
      child: GestureDetector(
        onTap: () {
          // Navigator.pop(context);
          showDialog(
              context: context,
              barrierDismissible: false,
              builder: (cont) {
                return MyDialog2();
              });
        },
        child: Text(
          "立即支付",
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

class MyDialog2 extends StatefulWidget {
  @override
  _MyDialog2State createState() => _MyDialog2State();
}

class _MyDialog2State extends State<MyDialog2> {
  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(left: 10, right: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Text(
                  "×",
                  style: TextStyle(color: Colors.grey, fontSize: 25),
                ),
              ),
              SizedBox(),
              Text(
                "支付",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
              ),
              Text(
                "使用密码",
                style: TextStyle(
                  fontSize: 15,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
        Container(
          height: 1,
          margin: EdgeInsets.only(top: 5, bottom: 5),
          decoration: BoxDecoration(
            color: Colors.green.withOpacity(0.3),
            //borderRadius: BorderRadius.all(Radius.circular(1)),
          ),
        ),
        Container(
          child: Column(
            children: <Widget>[
              Text(
                "跑腿",
                style: TextStyle(fontSize: 15),
              ),
              Text(
                "￥5.00",
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700),
              ),
            ],
          ),
        ),
        // Container(
        //   alignment: Alignment.center,
        //   child: Text("跑腿",style: TextStyle(fontSize: 15),),
        // ),
        // Container(
        //   alignment: Alignment.center,
        //   child: Text("￥5.00",style: TextStyle(fontSize: 30,fontWeight: FontWeight.w700),),
        // ),
        Container(
          margin: EdgeInsets.all(15),
          padding: EdgeInsets.only(top: 10, bottom: 10),
          decoration: BoxDecoration(
              border: Border(
                  top: BorderSide(color: Colors.grey.withOpacity(0.3)),
                  bottom: BorderSide(color: Colors.grey.withOpacity(0.3)))),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(
                Icons.public,
                color: Colors.blue,
              ),
              Text(
                "建设银行储蓄卡(3057)",
                style: TextStyle(color: Colors.grey, fontSize: 15),
              ),
              Icon(
                Icons.keyboard_arrow_right,
                color: Colors.grey,
              ),
            ],
          ),
        ),
        Container(
          height: 50,
          margin: EdgeInsets.only(left: 15, right: 15),
          decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(Radius.circular(5))),
          child: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: FlatButton(
              onPressed: () {
                Navigator.pop(context);
                setState(() {
                  _isShow = !_isShow;
                });
              },
              child: Text(
                "确认支付",
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
